<template>
    <div class="page page-association-detail has-headbar">
      <head-bar :title="$route.meta.title" :prevRoute="{name: 'association-list'}" />
      <div class="title">{{Detail.name}}</div>
      <div class="banner-box">
        <!-- <div class="cover-inner">
           <div class="logoOut">
            <div class="logo" :style="{backgroundImage:`url(${Detail.headImg})`}">
            </div>
            <h3>{{Detail.name}}</h3>
          </div>
        </div> -->

        <van-swipe :autoplay="3000">
          <van-swipe-item :key="index" v-for="(item, index) in banners">
            <div class="cover" :style="{backgroundImage:`url(${item})`}"></div>
          </van-swipe-item>
        </van-swipe>
      </div>
       <div class="divBg">
        <h3 class="textTitle">协会简介</h3>
        <p class="html-content" :class="{more: !more && showMore}" v-html="Detail.description"></p>
        <div class="more-button" v-if="showMore" :class="{acitve: more}" @click="moreToggle">查看更多</div>
      </div>
      <div class="divBg">
        <h3 class="textTitle">联系人/联系方式</h3>
        <p class="text">{{Detail.contactsPerson}} <a class="phone" :href="'tel:'+Detail.contactsPhone">{{Detail.contactsPhone}}</a></p>
        <!-- <h3 class="textTitle">联系电话</h3>
        <p class="text"></p> -->
        <h3 class="textTitle">地址</h3>
        <p class="text">{{Detail.address}}</p>
      </div>

      <h3 class="textTitle">最新资讯<router-link v-if="news.length" tag="span" :to="{name: 'association-news', params: { id: associationId }}" class="more">更多</router-link></h3>
      <div class="information-list">
        <news-item v-for="item in news" :item="item" :key="item.id"></news-item>
        <empty-data v-if="!news.length"></empty-data>
      </div>
    </div>
</template>
<script>
import { API_GET_ASSOCIATION_BY_ID } from '@/service/association'
import NewsItem from './components/newsItem'
import { wxjsdkMixin } from '@/components/mixins'
import { getWechatLink } from '@/libs/utils'
import { Swipe, SwipeItem } from 'vant'
export default {
  name: 'association-detail',
  mixins: [wxjsdkMixin],
  components: {
    NewsItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      banners: [],
      Detail: {},
      news: [],
      more: false
    }
  },
  created () {},
  mounted () {
    this.wechatShowMenu()
    this.getDetail().then(() => {
      let shareInfo = {
        title: this.Detail.name, // 分享标题
        desc: '',
        link: getWechatLink(window.location.hash), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: this.banners.length > 0 ? this.banners[0] : '', // 分享图标
        success: function () {
          console.log('分享', getWechatLink(window.location.hash))
        }
      }
      this.wechatShare(shareInfo)
    })
  },
  computed: {
    associationId () {
      return this.$route.params.id
    },
    showMore () {
      return 'description' in this.Detail && this.Detail.description.length > 100
    }
  },
  methods: {
    moreToggle () {
      this.more = !this.more
    },
    getDetail () {
      return API_GET_ASSOCIATION_BY_ID(this.associationId).then(resData => {
        this.Detail = resData.info
        this.news = resData.info.newsList
        this.banners = resData.info.groupImgList
        document.title = resData.info.name
      })
    }
  }
}
</script>
<style lang="less">
  .page-association-detail{
    width: 95%;
    margin: 0 auto;
    .banner-box{
      position: relative;
      height: 200px;
      margin-top: 5px;
    }
    .cover {
      width: 100%;
      height: 200px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      border-radius: 5px;
      // filter: blur(3px);
    }
    /deep/.van-swipe__indicator{
      background-color: #DEDEDE;
    }
    /deep/.van-swipe__indicator--active{
      background-color: #66CCFF;
    }
    .cover-inner {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);

      border-radius: 5px;
      position: absolute;
      left: 0; top: 0;
      z-index: 10;
    }
    .title {
      font-size: 34/2px;
      text-align: center;
      line-height: 24px;
      font-weight: bold;
    }
    .logoOut {
      width: 80%;
      margin:0 auto;
      padding:30px 0;
      text-align:center;
      color:#fff;
      .logo {
        display: inline-block;
        width: 55px;
        height: 55px;
        border-radius: 55px;
        vertical-align: middle;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
      h3{font-size:18px;padding:10px 0}
      p{font-size:16px;}
    }
    .divBg{
      box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
      border-radius: 5px;
      margin: 10px 0;
      padding: 10px;
      .phone{
        font-size:14px;
        color:#8EA1F6;
      }
    }
    @import "../../assets/styles/htmlcontent.less";
    /*标题*/
    .textTitle {
      border-left: 5/2px solid @colorPrimary;
      margin: 10px 0;
      text-indent: 5px;
      font-size: 16px;
      font-weight: bold;
      color:#747474;
      .more{font-size:14px;float:right;}
    }
    .more-button {
      text-align: center;
      font-weight: bold;
      padding: 12px 0;
      &:after {
        content: "";
        display: inline-block;
        margin-left: 5px;
        width: 0;
        height: 0;
        border-left: 17/4px solid transparent;
        border-right: 17/4px solid transparent;
        border-top: 9/2px solid #666;
        vertical-align: middle;
        transition: transform .3s cubic-bezier(.86,0,.07,1), -webkit-transform .3s cubic-bezier(.86,0,.07,1);
      }
      &.acitve {
        &:after{
          transform: rotate(180deg);
        }
      }
    }
    .html-content.more{
      .line-overflow(3);
    }
  }
</style>
